<template>
  <div class="category-wrapper">
    <div class="category-item" v-for="(item) in categories" :key="item.id">
      <img :src="item.icon">
      <p>{{item.title}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Category',
  data: function () {
    return {
      categories: []
    }
  },
  created: function () {
    this.initData()
  },
  methods: {
    initData: function () {
      this.$http
        .get('/main/category')
        .then(data => {
          console.log(data)
          this.categories = data
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@css/style.styl'

.category-wrapper
  width: 100%
  height: px2rem(300)
  display: flex
  flex-wrap:wrap
  align-content :space-around
  padding: px2rem(20) px2rem(10) px2rem(20) px2rem(10)
  margin-bottom: px2rem(10)
  background:$color-white
  .category-item
    flex:0 0 20%
    img
      object-fit: fit
      width: 12%vw
      height :12%vw
      margin-top: px2rem(10)
    p
      font-size :px2rem(25)
      text-align :center
      margin-top: px2rem(20)
</style>
